<template>
	<div v-loading="loading" class="main-box">
		<div class="dl-row mar-bottom-20">
			<div class="search-box" style="margin-right: 20px">
				<el-input
						placeholder="请输入课程关键词"
						prefix-icon="el-icon-search"
						clearable
						@clear="init()"
						v-model="courseName">
				</el-input>
			</div>
			<el-button type="success" round size="small" @click="init()">搜索</el-button>
		</div>
		<div class="mar-top">
		  <article>
		    <!-- <div class="dl-row center">
		      <h1 class="text-xl">全部课程</h1>
		      <div class="dl-row center tab-box">
		        <div v-for="(item,index) in recommendTag" :key="index" class="" @click="recommendChange(index)">
		          <span class="cursor-pointer pb-1" :class="recommendIndex===index?'act-item':''">{{item.name}}</span>
		        </div>
		      </div>
		    </div> -->
			<div  v-if="data.length>0" class=" class-list-empty">
				<div class="mt-4 dl-row">
				  <div v-for="(course,index) in data" :key="index" class="w-[25%]">
					<N-CurseCard :course="course" :collect="collect" ></N-CurseCard>
				  </div>
				</div>
				<el-pagination
						:total="total"
						:current-page="page + 1"
						style="margin-top: 8px;"
						layout="total, prev, pager, next, sizes"
						@size-change="sizeChange"
						@current-change="pageChange"/>
			</div>
			<div v-if="data.length==0 && !loading">
			   <el-empty class="empty" :image-size="250" :image="require('../../../assets/no_data_images/no_course.png')"></el-empty>
			</div>
		  </article>
		</div>

	</div>
</template>

<script>
	import initData from '@/mixins/initData'
	import {pageCourseList } from '@/api/course'
	export default {
	  mixins: [initData],
	  data() {
		return {
		  loading:false,
		  typeId:"",
		  courseName:"",
		  course:{},
		  collect:true,
		  recommendIndex: 0,
		  recommendIndex2: 0,
		  isHot:null,
		  classTypeChildrenList:[],
		  calssChildrenIndex:0,
		  courseList:[],
		  recommendTag: [
			{name: '最新',type: 0,},
			{name: '热门',type: 1,},
		  ]
		}
	  },
	  created() {
	  	this.$nextTick(() => {
			this.init()
	  	})
	  },
	  methods: {
		beforeInit() {
		    this.url = 'course/page-course-list-type'
		    this.params = {page: this.page, size: this.size,status:1, courseName: this.courseName}
		    return true
		},
	  },
	}
</script>

<style scoped>
	.condition-box {
	    padding: 30px 30px 30px 15px;
	}
	.tab-box{
	  margin-left: 20px;
	}
	.mar-top {
	    margin-top: 30px;
	}
	.mt-4{
	  margin-right: -30px;
	  flex-wrap: wrap;
	}
	.condition-box .item h1{
		width: 70px;
	}
	.empty{
		 height: calc(100vh - 334px);
	}
	.class-list-empty{
		 min-height: calc(100vh - 384px);
	}
</style>